<!-- 合作标签 -->
<template>
    <div>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item label="标签名称：">
                <el-input v-model.trim="ruleForm.labelName" placeholder="请输入标签名称" size="small" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="searchlist" id="monitorEnter" size="small">查询</el-button>
                <el-button type="primary" @click="addhander('add')" size="small">新建标签</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border style="width: 70%">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="模式ID" prop="labelCode" align="center"></el-table-column>
            <el-table-column label="合作标签" prop="labelName" align="center"></el-table-column>
            <el-table-column label="类型" prop="labelType" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.labelType=='1'?'普通':'包销'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建人" prop="creatorName" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="addhander('edit',scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="ruleForm.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="ruleForm.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>

        <el-dialog title="" :visible.sync="dialogFormVisible" width="500px"  :close-on-click-modal="modelclose">
            <el-form :model="form">
            	<el-form-item label="" :label-width="formLabelWidth">
            	    <el-radio-group v-model="form.labelType">
            	      <el-radio :label="2">包销</el-radio>
            	      <el-radio :label="1">普通</el-radio>
            	    </el-radio-group>
            	  </el-form-item>

                <el-form-item label="标签名称:" :label-width="formLabelWidth">
                    <el-input v-model.trim="form.labelName" placeholder="请输入标签名称" style="width: 300px;" maxlength="20"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="savehander">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import api from '@/api/apiPath'

    export default {
        name:'cooperativelable',
        title:'合作标签管理',
        data() {
            return {
                modelclose:false,
                ruleForm: {
                    labelName:undefined,
                    pageNum: 1,
                    pageSize: 10,
                },
                form: {
                    labelName: "",
                    labelType:'',//1普通2包销
                },
                tableData: [],
                dialogFormVisible: false,
                totalSize: 0,
                formLabelWidth: '120px',
            }
        },
        methods: {
            handleCurrentChange() {
                this.getlist()
            },
            handleSizeChange(val) {
                this.ruleForm.pageSize = val
                this.getlist();
            },
            searchlist(){
                this.ruleForm.pageNum = 1
                this.getlist()
            },
            getlist() {
                this.axios.post(api.COOPERATIONLABELLIST, {
                    pageSize: this.ruleForm.pageSize,
                    pageNum: this.ruleForm.pageNum,
                    labelName: this.ruleForm.labelName
                }).then((res) => {
                    this.tableData = res.data.data.list;
                    this.totalSize = res.data.data.total;
                })
            },
            savehander() {
                if (this.form.labelType=='') {
                    this.$message({
                        message: '请选择标签类型',
                        type: 'warning'
                    });
                    return
                }
                if (this.form.labelName == '') {
                    this.$message({
                        message: '请输入标签名称',
                        type: 'warning'
                    });
                    return
                }
                let url = api.COOPERATIONLABEADD;
                if (this.form.id) {
                    url = api.COOPERATIONLABEGETEDIT
                }
                this.axios.post(url, {
                    labelName: this.form.labelName,
                    id: this.form.id,
                    labelType:this.form.labelType
                }).then((res) => {
                    this.$message({
                        message: this.form.id ? "修改成功" : "新增成功",
                        type: 'success'
                    });
                    this.dialogFormVisible = false;
                    this.getlist();
                })
            },
            handleCurrentChange() {
                this.getlist()
            },
            handleSizeChange(val) {
                this.ruleForm.pageSize = val
                this.getlist();
            },
            addhander(type, row) {
                if (type == "add") {
                    this.form.id = "";
                    this.form.labelName = '';
                    this.form.labelType= 1;
                } else {
                    this.form.id = row.id;
                    this.form.labelName = row.labelName;
                    this.form.labelType = row.labelType;
                }
                this.dialogFormVisible = true
            }
        },
        activated(){
            this.searchlist()
        },
        created() {
            this.getlist()
        }
    }

</script>

<style lang="stylus" scoped>

</style>